<!-- 分配宿舍 -->
<template>
  <div class="AllocateDormitories-container">
    <TitleBar title="条件筛选"></TitleBar>
    <ConditionalFilter @headleGroup="headleGroup" :Group="GroupRef"></ConditionalFilter>
    <TitleBar title="宿舍信息"></TitleBar>
    <classList :classList="classListRef" @close="getClassData" :isLoading="isLoadingRef"></classList>
  </div>
</template>

<script setup>
import TitleBar from "@/components/TitleBar/index.vue"
import classList from "./components/classList.vue";
import ConditionalFilter from "./components/ConditionalFilter.vue";
import {getClass} from "@/api/class.js"
import { ref, watchEffect } from "vue";
const GroupRef = ref(0); // 条件
const classListRef = ref(); // 班级数据
const isLoadingRef = ref(false)
// 获取条件
const headleGroup = (value) =>{
  GroupRef.value = value
}
const getClassDataInfo = async (condition) =>{
  isLoadingRef.value = true
  const {data} = await getClass(condition)
  classListRef.value = data
  isLoadingRef.value = false
}
// 获取远程数据
watchEffect(async () => {
  await getClassDataInfo(GroupRef.value)
})
const getClassData = async () =>{
  await getClassDataInfo(GroupRef.value)
}
</script>

<style lang="less" scoped>
.AllocateDormitories-container{
  width: 100%;

}
</style>